<template>
<div id="TxJl" class="page-blank">
  <van-nav-bar title="提现记录" left-arrow @click-left="goBack()"/>
  <van-search v-if="userInfo.roleType == 0" v-model="searchValue" placeholder="请输入用户账号" show-action shape="round">        
    <div slot="action" @click="onSearch" class="ft-blue">搜索</div>
  </van-search>
  <div class="flex-body">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
      <div class="tongji-box" v-for="(item, index) in list" :key="index">
        <div class="tongji-item">
          <div class="tongji-row" style="height: 0.8rem;">
            <div style="font-size: 0.3rem;">{{ item.withdrawalRecordId }}</div>
            <van-button @click="shenghe( item, 0, index )" v-if="userInfo.userId == item.userId && item.withdrawalStatus == 6" type="warning" style="width: 1.el-col-md-push-8rem; height: 0.6rem; line-height: 0.6rem;">重新申请</van-button>
            <van-button @click="cancelSubmit( item, 0, index )" v-if="userInfo.userId == item.userId && item.withdrawalStatus == 6" type="warning" style="width: 1.el-col-md-push-8rem; height: 0.6rem; line-height: 0.6rem;">取消申请</van-button>
          </div>
          <div v-if="item.wxErrorCode" class="tongji-row" style="height: auto;">
            <div>失败原因：</div>
            <div style="max-width: 5rem;">{{ item.wxErrorCode }}</div>
          </div>
          <div class="tongji-row">
            <div>申请时间：</div>
            <div>{{ item.createTime }}</div>
          </div>
          <div class="tongji-row">
            <div>账户类型：</div>
            <div>{{ typeArr[ item.withdrawalWay ] }}</div>
          </div>
          <div class="tongji-row">
            <div>提现金额：</div>
            <div>{{ item.withdrawalAmount }}</div>
          </div>
          <div class="tongji-row">
            <div>到账金额：</div>
            <div>{{ item.actualAmount }}</div>
          </div>
          <div class="tongji-row">
            <div>手续费率：</div>
            <div>{{ item.serviceChargeRatio }}</div>
          </div>
          <div v-if="userInfo.roleType == 0" class="tongji-row">
            <div>用户名：</div>
            <div>{{ item.userName }}</div>
          </div>
          <div v-if="userInfo.roleType == 0" class="tongji-row">
            <div>用户角色：</div>
            <div>{{ jueseArr[ item.userType ] }}</div>
          </div>
          <div v-if="userInfo.roleType == 0" class="tongji-row">
            <div>手机号：</div>
            <div>{{ item.userPhone }}</div>
          </div>
          <div v-if="userInfo.roleType == 0" class="tongji-row">
            <div>订单号：</div>
            <div>{{ item.wxPartnerTradeNo }}</div>
          </div>
          <div v-if="userInfo.roleType == 0" class="tongji-row">
            <div>付款单号：</div>
            <div>{{ item.wxPaymentNo }}</div>
          </div>
        </div>
      </div>
    </van-list>
  </div>  
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';

@Component
export default class TxJl extends Vue {

  userInfo: any = {}

  list: any = []

  loading: boolean = false
  finished: boolean = false
  page: any = 1
  searchValue: any = ''

  typeArr: any = [ '银行卡', '支付宝', '微信' ]
  jueseArr: any = [ '管理员', '代理', '业务员', '商户' ]
    
  onSearch() {
    this.list = [];
    this.page = 1;
    this.loading = true;
    this.finished = false;
    this.getList();
  }
  
  getList() {
    let page = this.page, size = 10, findSubordinate = true;
    axios.post('/api/WithdrawController/getWithdrawList', { 
      query: { page, size },
      body: { 
        userId: this.userInfo.roleType == 0 ? null : this.userInfo.userId,
        userName: this.searchValue || null
      }
    }).then((res: any) => {
      if(this.page != page) return ;
      let json = res || {};
      let list = json.list || [];
      this.page = page + 1;
      this.loading = false;
      this.list.push( ...list );
      if(json.isLastPage) this.finished = true;
    }).catch((err: any) => {
      this.loading = false;
      this.finished = true;
    });
  }
  
  shenghe(item: any, withdrawalStatus: any, index: any) {    
    axios.post('/api/WithdrawController/resubmitWithdraw', {  
      withdrawalStatus, withdrawalRecordId: item.withdrawalRecordId
    }).then((res: any) => {      
      this.$toast('该申请已重新提交，请等待审核');
      this.list[ index ].withdrawalStatus = withdrawalStatus;
    });
  }
  cancelSubmit(item: any, withdrawalStatus: any, index: any) {   
    axios.post('/api/WithdrawController/cancelWithdraw', {  
      withdrawalStatus, withdrawalRecordId: item.withdrawalRecordId
    }).then((res: any) => {      
      this.$toast('该申请已撤销');
      this.onSearch();
    });
  }

  goBack() {
    this.$router.go(-1);
  }

  mounted() {
    this.userInfo = this.$store.state.userInfo;
  }
  
};
</script>

